<!--
 * @Descripttion: 抽屉组件
 * @version: 1.0
 * @Author: lsy
 * @Date: 2023年2月29日21:27:46
 * @LastEditors: lsy
 * @LastEditTime: 2023-02-10 20:42:55
-->
<template>
	<div class="scDrawer">
		<el-drawer
			v-model="visible"
			v-bind="{
				...(slots.header ? { showClose: false } : { title: '标题' }),
				...$attrs,
			}"
		>
			<!-- 支持外界自定义头部内容 -->
			<template
				v-if="slots.header"
				#header="{ close, titleId, titleClass }"
			>
				<slot
					name="header"
					:close="close"
					:titleId="titleId"
					:titleClass="titleClass"
				></slot>
			</template>
			<!-- 抽屉的默认插槽 -->
			<div class="scDrawer-content">
				<slot></slot>
			</div>
			<!-- 抽屉的脚部内容 -->
			<template v-if="isShowFooter" #footer>
				<slot v-if="slots.footer" name="footer"></slot>
				<div v-else class="default-footer">
					<el-button @click="emits('cancel')">取消</el-button>
					<el-button type="primary" @click="emits('confirm')"
						>确定</el-button
					>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup>
import { computed, defineProps, defineEmits, getCurrentInstance } from "vue";

const { slots } = getCurrentInstance();
const props = defineProps({
	visible: {
		type: Boolean,
	},
	isShowFooter: {
		type: Boolean,
		default: true,
	},
});
const emits = defineEmits(["update:modelValue", "confirm", "cancel"]);
const visible = computed({
	get() {
		return props.visible;
	},
	set(val) {
		emits("update:modelValue", val);
	},
});
</script>

<style lang="scss" scoped>
.scDrawer {
	.scDrawer-content {
		padding: 0px 10px;
	}
	::v-deep(.el-drawer__title) {
		color: #000;
	}
	::v-deep(.el-drawer__header) {
		padding: 20px;
		margin-bottom: 12px;
		border-bottom: 1px solid #ebeef5;
	}
	::v-deep(.el-drawer__footer) {
		border-top: 1px solid #ebeef5;
	}
	.default-footer {
		display: flex;
		justify-content: flex-end;
	}
}
</style>
